import React, { useState, useRef, useEffect } from 'react';
import './styles.scss';



const FilePreviews = ({ files, getFileIcon, canRemove, handleRemoveFile }) => {
    return (
        <div className="chat-area__file-previews">
            {files.map((file) => (
            <div
                key={file.id}
                className={`chat-area__file-preview chat-area__file-preview--${file.status}`}
                style={file.status === 'uploading' ? {
                    background: `linear-gradient(to right, 
                        #EBEDF0 0%, 
                        #EBEDF0 ${file.progress}%, 
                        #F7F8FA ${file.progress}%, 
                        #F7F8FA 100%
                    )`,
                } : {
                    background: '#F7F8FA',
                }}
            >
                <div className="chat-area__file-content">
                    <div
                        className={`chat-area__file-icon ${file.type?.toLowerCase().startsWith('image/')
                            ? 'chat-area__file-icon--image'
                            : ''
                            }`}
                    >
                        {file.type?.toLowerCase().startsWith('image/') &&
                            file.previewUrl ? (
                            <img src={file.previewUrl} alt={file.name} />
                        ) : (
                            <img src={getFileIcon(file)} alt={file.name} />
                        )}
                    </div>
                    <div className="chat-area__file-info">
                        <div className="chat-area__file-title">{file.name}</div>
                        <div
                            className={`chat-area__file-size ${file.status === 'error' ? 'chat-area__file-size--error' : ''
                                }`}
                        >
                            {file.status === 'error' ? (
                                <>
                                    <i className="ri-error-warning-line" />
                                    上传失败
                                </>
                            ) : (
                                <>
                                    {file.status === 'uploading' && `${file.progress}% · `}
                                    {file.sizeFormatted}
                                </>
                            )}
                        </div>
                    </div>
                    {canRemove && (
                        <button
                            className="chat-area__remove-file"
                        onClick={(e) => {
                            e.preventDefault();
                            handleRemoveFile(file.id);
                        }}
                    >
                            <i className="ri-close-line" />
                        </button>
                    )}
                </div>
            </div>
        ))}
    </div>
    )
}

export default FilePreviews;